<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>repository</title>
    <%--引入jquery和bootstrap方式--%>
    <link rel="stylesheet" href="/webjars/bootstrap/4.6.1/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <style type="text/css">
        .container-dld{
            display: flex;
            flex-wrap: wrap;/*自动换行*/
        }
        .card-dld{
            width: 12rem;
        }
        .container-dld-ops{
            display: flex;
            justify-content:space-around;
        }
        .card-text-dld{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /*.files{*/
        /*    background-color: #ff627a;*/
        /*    display: flex;*/
        /*    flex-wrap: wrap;*/
        /*    justify-content: space-between;*/
        /*}*/
        /*.file{*/
        /*    width: 140px;*/
        /*    height: 80px;*/
        /*}*/
        /*.file-head{*/
        /*    width: 100%;*/
        /*    height: 40px;*/
        /*    background-color: #6affdb;*/
        /*}*/
    </style>
</head>
<body>
<div class="container-dld">
    <c:forEach items="${fileToDownload}" var="i">
        <div class="card card-dld">
            <div class="card-header">
                <img class="card-img-top" src="/aaa.webp/" alt="pic"/>
            </div>
            <div class="card-body">
                <div data-toggle="popover" title="${i.title}">
                    <div class="card-text card-text-dld">${i.title}</div>
                </div>
                <div class="container-dld-ops">
                    <div>${i.size}B</div>
                    <a href="/download/${i.title}" class="btn btn-warning">下载</a>
                </div>
            </div>
        </div>
    </c:forEach>
</div>
<%--<div class="files">--%>
<%--    <c:forEach items="${fileToDownload}" var="i">--%>
<%--    &lt;%&ndash;    <button>${i}</button>&ndash;%&gt;--%>
<%--        <div class="file">--%>
<%--            <div class="file-head"></div>--%>
<%--            <div class="file=body"></div>--%>
<%--                <a class="btn btn-primary btn-sm" href="/download/${i}">${i}</a>--%>
<%--                <div>文件大小</div>--%>
<%--        </div>--%>
<%--    </c:forEach>--%>
<%--</div>--%>
<script>
    $(function (){$("[data-toggle='popover").popover();});
</script>
</body>
</html>